<!DOCTYPE HTML>
<html>
    <head>
        <title>liveplayer</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引用 liveplayer-element.min.js -->
        <script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js" charset="utf-8"></script>
    </head>
    <body>
    <div id="id_test_video" style="width:100%; height:auto;"></div>
    
    <script type="text/javascript">
    
    var player = new TcPlayer('id_test_video', {
    	"m3u8": "http://1304320487.vod2.myqcloud.com/beab3ec2vodcq1304320487/919b4b0b5285890811023386269/f0.mp4", //请替换成实际可用的播放地址
    	//"m3u8": "http://47.92.196.10:8080/live/xz2.flv",
    	//"live": true,
    	"x5_type": 'h5',
    	"preload": true,
    	"autoplay" : true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
    	//"poster" : "http://1304320487.vod2.myqcloud.com/beab3ec2vodcq1304320487/919b4b0b5285890811023386269/5285890811023386272.jpg",
    	"width" :  '480',//视频的显示宽度，请尽量使用视频分辨率宽度
    	"height" : '320',//视频的显示高度，请尽量使用视频分辨率高度
    	 "listener": function(e) { //监听事件
                 if (e.type == "fullscreen") { //视频播放全屏可切换横屏
                     if (e.detail.isFullscreen == true) {
                         plus.screen.unlockOrientation("landscape-primary"); //横屏 mui写法
                     } else if (e.detail.isFullscreen == false) {
                         plus.screen.lockOrientation("portrait-primary");//强制竖屏 mui写法
                     }
                 }
                 if(e.type == 'load') { //加载完事件
                	 setInterval(() => {
                		 player.togglePlay();
                     }, 10*1000);
                 
     				//解决微信浏览器脱离文档流播放的问题；
     				//TCPlayerLite文档设置"x5_type": "h5"在安卓微信浏览器不生效，以下代码可解决：
     				//document.querySelector('id_test_video').setAttribute('x5-video-player-type', 'h5-page');
     				//document.querySelector('id_test_video').setAttribute('x5-video-player-fullscreen', 'false');
     				//document.querySelector('id_test_video').setAttribute('x5-video-orientation', 'portrait');
     			}	
    		 }
    		 
    	});
    </script>
    </body>
</html>